<template>
  <div class="myNft-container">
    <div class="myNft-box">
      <div class="select-grid container">
        <div>
          <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchInputChange"></el-button>
          </el-input>
        </div>

        <!-- <el-select v-model="value" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
      </div>
      <minenft :grid-show-num="gridShowNum" :sort="sort" :search="searchWord"></minenft>
    </div>
  </div>
</template>

<script>
import minenft from '@/components/MineNft.vue'

export default {
  name: "",
  components: { minenft },
  data() {
    return {
      ismenuHidden: false,
      isShow: false,
      isSelect: NaN,
      clientWidth: document.body.clientWidth,
      gridShowNum: 4,
      searchInput: "",
      radiochecked: true,
      options: [
        {
          value: "time",
          label: "最新上架",
        },
        {
          value: "up",
          label: "价格降序",
        },
        {
          value: "down",
          label: "价格升序",
        },
      ],
      value: "",
      sort: "",
      searchWord: "",
    };
  },
  methods: {
    menuHidden() {
      this.ismenuHidden = !this.ismenuHidden;
    },
    handleOpen(key, keyPath) {
      this.isShow = !this.isShow;
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    searchInputChange() {
      this.searchWord = this.searchInput;
      console.log(this.clientWidth)
    },
    selectChange(value) {
      this.sort = value
      console.log(value)
    },
    change(value) {
      console.log(value)
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.clientWidth = document.body.clientWidth;
      })();
    };
    if (this.clientWidth > 768) {
      this.gridShowNum = 4;
    } else if (this.clientWidth <= 768) {
      this.gridShowNum = 2;
    }
  },
  watch: {
    clientWidth(Val) {
      if (Val > 850) {
        this.gridShowNum = 4;
      } else if (Val <= 850) {
        this.gridShowNum = 2;
      }
      console.log(Val); //浏览器窗口变化时，打印宽度。
    },
  },
};
</script>
<style  lang="less" scoped>
.myNft-container {
  position: relative;
  // height: 100vh;
  overflow: hidden;
  transition: .5s;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  background: #fbfbfb;
  box-shadow: 4px 4px 6px rgb(143, 140, 140);
  @apply rounded-md;
  padding: 1rem 0;
  margin-bottom: 1rem;

  .menu.hidden {
    // width: 30px;
    left: -250px;

    .el-icon-back {
      transform: rotate(180deg);
    }

    .menubox {
      left: -101% !important;
      // display: none;
      overflow: hidden;
    }
  }

  .menu.hidden+.myNft-box {
    left: 50px;
    // width: calc(100%);
    width: calc(100% - 50px);

  }

  .menu {
    position: fixed;
    padding-top: 80px;
    width: 300px;
    left: -0%;
    height: 100%;
    box-sizing: border-box;
    // background: #2469e5;
    border-right: 1px solid rgba(128, 128, 128, 0.496);
    background: #fff;
    transition: .5s;
    flex-shrink: 0;
    z-index: 99;

    .menu-show {
      position: relative;
      width: 100%;
      height: 40px;

      .el-icon-back {
        position: absolute;
        right: 5%;
        top: 10px;
        font-size: 20px;


      }
    }

    .menubox {
      position: relative;
      width: 100%;
      left: 0%;
      transform: .5s;

      .menuli {
        width: 100%;
        height: auto;
        overflow: hidden;

        box-sizing: border-box;

        .title {
          width: 100%;
          height: 50px;
          padding: 5px;
          line-height: 45px;
          box-sizing: border-box;
          background: #fff;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          i {
            // font-size: 20px;
            line-height: 50px;
          }
        }

        .title.active {
          .el-icon-arrow-down {
            transition: .5;
            transform: rotate(180deg);
          }
        }

        .select-box {
          width: 100%;
          height: 0px;
          background: #f4f4f4;
          display: flex;
          // justify-content: center;
          flex-wrap: wrap;
          overflow: hidden;
          // transition: .5s;
          overflow: hidden;


          .select {
            width: 50%;
            padding: 5px;
            // background: #fff;
            box-sizing: border-box;

            .select-span {
              background: #fff;
              box-sizing: border-box;
              padding-top: 5px;
              padding-bottom: 5px;
              cursor: pointer;
              transition: .5;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;

            }

            .select-span.active {
              background: #2469e5;
              color: #fff;
            }
          }


        }

        .select-box.active {
          padding-top: 10px;
          padding-bottom: 10px;
          box-sizing: border-box;
          height: auto;

        }

      }

    }

    .menubox::before {
      content: "";
      position: absolute;
      top: 0%;
      left: 0%;
      width: 99%;
      height: 1px;
      background: gray;
      opacity: .5;

    }
  }

  .myNft-box {
    position: relative;
    width: 100%;
    // left: 300px;
    // background: #fff;
    // width: calc(100% - 300px);
    height: auto;
    // overflow: scroll;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: .5s;
    display: flex;
    flex-direction: column;
    align-items: center;


    .select-grid {
      position: relative;
      // align-self: flex-start;
      // left: 5%;
      height: 50px;
      display: flex;
      width: 90%;


      .input-box {
        height: 40px;
        border: 1px solid #2469e5;
        border-radius: 24px;
        padding: 0 10px;

        input {
          border: none;
          outline: none;
          height: 40px;
          border-radius: 24px;

          padding-left: 10px;
          box-sizing: border-box;
          margin-right: 10px;
        }

        button {
          margin-left: 10px;

          padding: 5px 10px 5px 10px;
          border: none;
          border-radius: 24px;
          background: #2469e5;
          cursor: pointer;
          color: #fff;
        }
      }

      .el-select {
        position: relative;
        margin-left: 20px;

        .el-scrollbar__view {
          .el-select-dropdown__item {
            padding-left: 10px !important;
          }
        }

      }
    }

    .myNft-container {
      margin-top: 1rem;
    }
  }

}
</style>